<style>
    .tt-dropdown-menu {
        background-color: #f2f2f2;
        margin-top: 2px;
        width: 430px;
    }
    .tt-suggestion {
        font-size: 15px;
        line-height: 24px;
        padding: 7px 20px;
    }
    .tt-suggestion.tt-is-under-cursor {
        background-color: #0097CF;
        color: #FFFFFF;
    }
    .tt-suggestion p {
        margin: 0;
    }
    
</style>
<header>
    <ul id='index-nav'> 

        <li><a href="<?php echo $this->basePath() ?>">
                <div id="index-logo"> 
                    <img src="<?php echo $this->basePath() ?>/img/app/app/logo.png"/>
                </div>
            </a>
        </li>

        <li id="index_search_box">
            <input type="text" spellcheck="false" name="searchbar" autocomplete="off" placeholder="Tìm kiếm bạn bè hoặc công việc ..."/>
        </li>

        <li id="index-notify">

            <div class="index_notice_connection index_notify_icon"> 
                <img src="<?php echo $this->basePath() ?>/img/app/app/icon/connection.png">

                <ul id="index_connection">
                    <div class="index_menu_area index_area_connection">
                        <li>SAMPLE 1</li>
                        <li>SAMPLE 2</li>
                        <li>SAMPLE 3</li>
                        <li>SAMPLE 4</li>
                        <li>SAMPLE 5</li>
                        <li>SAMPLE 6</li>
                    </div>
                </ul>

            </div>

            <div class="index_notice_message index_notify_icon">
                <img src="<?php echo $this->basePath() ?>/img/app/app/icon/message.png">

                <ul id="index_message">
                    <div class="index_menu_area index_area_message">
                        <li>SAMPLE 1</li>
                        <li>SAMPLE 2</li>
                        <li>SAMPLE 3</li>
                        <li>SAMPLE 4</li> 
                        <li>SAMPLE 5</li>
                        <li>SAMPLE 6</li>
                    </div>
                </ul>

            </div>

            <div class="index_notice_status index_notify_icon">
                <img src="<?php echo $this->basePath() ?>/img/app/app/icon/status.png">

                <ul id="index_status">
                    <div class="index_menu_area index_area_status">
                        <li>SAMPLE 1</li>
                        <li>SAMPLE 2</li>
                        <li>SAMPLE 3</li>
                        <li>SAMPLE 4</li>
                        <li>SAMPLE 5</li>
                        <li>SAMPLE 6</li>
                    </div>
                </ul>
            </div>

        </li>

        <li id="index-option">
            <div class="index_option_setting index_notify_icon">
                <img src="<?php echo $this->basePath() ?>/img/app/app/icon/setting.png">

                <ul id="index_setting">
                    <div class="index_menu_area index_area_setting">
                        <li><a href="<?php echo $this->basePath() . '/' . $user->alias ?>">My Profile</a></li>
                        <li><a>Edit Account</a></li>
                        <li><a href="<?php echo $this->basePath() ?>/app/setting">Settings</a></li>
                        <li><a>Activity logs</a></li>
                        <li><a>Help</a></li>
                        <li><a href="<?php echo $this->basePath() ?>/app/logout">Logout</a></li>
                    </div>
                </ul>

            </div>
        </li>

        <li id="index-account">
            <div>  
                <img class="index_avatar_small"
                     src="<?php echo $config->getImage('avatar_current', $user->alias, '.jpg') ?>"/>
                <span class="index_avatar_title"><?php echo $user->name ?></span>

            </div>
        </li>
		
        <div></div>

    </ul>
</header>

